<template>
  <view class="history">
    <view
      class="history-row flexr align-center justify-center"
      @click="showHistoryDocPicker"
    >
      <text class="text-color1">{{ optometry.createTime }}</text>
      <image class="down" src="@/static/arrow_down.png"></image>
    </view>
    <view class="history-row flexr">
      <view class="row-cell header"> 参数 </view>
      <view class="row-cell header text-color-primary"> 右眼(R) </view>
      <view class="row-cell header text-color-primary"> 左眼(L) </view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 主视眼 </view>
      <view class="row-cell text-color-primary">{{
        optometry.dominantEye === 0 ? "右眼" : "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.dominantEye === 1 ? "左眼" : "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 球镜(SPH) </view>
      <view class="row-cell text-color-primary">{{
        optometry.rdegree || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.ldegree || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 柱镜(CYL) </view>
      <view class="row-cell text-color-primary">{{
        optometry.rAstigmatism || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.lAstigmatism || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 轴位(ASIX) </view>
      <view class="row-cell text-color-primary">{{
        optometry.rshaftposition || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.lshaftposition || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 裸眼视力 </view>
      <view class="row-cell text-color-primary">{{
        optometry.rnakedeyesight || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.lnakedeyesight || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 棱镜 </view>
      <view class="row-cell text-color-primary">{{
        optometry.rPrism || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.lPrism || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 底向 </view>
      <view class="row-cell text-color-primary">{{
        optometry.rbd || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.lbd || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 矫正视力 </view>
      <view class="row-cell text-color-primary">{{
        optometry.rvisionCorrection || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.lvisionCorrection || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 瞳距(PD) </view>
      <view class="row-cell text-color-primary">{{
        optometry.rPupilDistance || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.lPupilDistance || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 下加光 </view>
      <view class="row-cell text-color-primary">{{
        optometry.rorthodonticforces || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.lorthodonticforces || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 瞳高 </view>
      <view class="row-cell text-color-primary">{{
        optometry.rpupilHigh || "-"
      }}</view>
      <view class="row-cell text-color-primary">{{
        optometry.lpupilHigh || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 瞳距 </view>
      <view class="row-cell text-color-primary align-right">{{
        optometry.pupilDistance || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 验光类型 </view>
      <view class="row-cell text-color-primary align-right">{{
        optometry.optometryType || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 验光师 </view>
      <view class="row-cell text-color-primary align-right">{{
        optometry.optometrist || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 验光门店 </view>
      <view class="row-cell text-color-primary align-right">{{
        optometry.headofficeName || "-"
      }}</view>
    </view>
    <view class="history-row flexr">
      <view class="row-cell"> 备注 </view>
      <view class="row-cell text-color-primary align-right">{{
        optometry.reMark || "-"
      }}</view>
    </view>
    <view class="history-row file flexr">
      <view class="row-cell"> 附件 </view>
      <view class="flexr flex-wrap">
        <view
          class="file-item"
          v-for="(a, index) in attachments"
          :key="a"
          @click="showAttachment(index)"
        >
          <image class="file-icon" src="@/static/word.png"></image>
          <text>附件{{ index }}</text>
        </view>
      </view>
    </view>

    <uni-popup
      ref="historyDocRef"
      type="bottom"
      background-color="#fff"
      border-radius="30rpx 30rpx 0 0"
      :mask-click="false"
    >
      <historyDocPicker
        :current="optometryIndex"
        @onCancel="onCancelOptometryPicker"
        @onConfirm="onConfirmOptometryPicker"
      ></historyDocPicker>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
import historyDocPicker from "@/widgets/historyDocPicker.vue";
const historyDocRef = ref(null);
const optometryIndex = ref(0);
const optometry = computed(() => {
  return userStore.customerAllOptometry[optometryIndex.value] || {};
});
const attachments = computed(() => {
  return optometry.value.attachment
    ? optometry.value.attachment.split(",")
    : [];
});
function showAttachment(index) {
  uni.previewImage({
    urls: attachments.value,
    current: index,
  });
}

function showHistoryDocPicker() {
  historyDocRef.value?.open("bottom");
}
function onCancelOptometryPicker() {
  historyDocRef.value?.close();
}
function onConfirmOptometryPicker(index) {
  optometryIndex.value = index;
  historyDocRef.value?.close();
}
</script>

<style lang="scss">
.down {
  height: 15rpx;
  width: 24rpx;
  margin-left: 25rpx;
}
.history {
  background-color: white;
  border-radius: 20rpx;
  .history-row {
    height: 96rpx;
    min-height: 96rpx;
    color: $text-color1;
    border-bottom: 1px solid $divider-color;
    .row-cell {
      align-self: stretch;
      display: flex;
      flex: 1;
      align-items: center;
      padding-left: 25rpx;
      &.header {
        background-color: rgba(54, 187, 165, 0.08);
        font-size: 32rpx;
      }
      &.align-right {
        padding-right: 25rpx;
        text-align: right;
        justify-content: flex-end;
      }
    }
    .header + .header {
      border-left: 1px solid white;
    }
    &.file {
      // min-height: 200rpx;
      height: auto;
      padding-right: 32rpx;
      padding-top: 20rpx;
      // padding-bottom: 20rpx;
      .row-cell {
        min-width: 100rpx;
        margin-bottom: 20rpx;
      }
      .file-item {
        margin-bottom: 20rpx;
        margin-left: 20rpx;
        display: flex;
        align-self: center;
        width: 104rpx;
        height: 104rpx;
        min-height: 104rpx;
        min-width: 104rpx;
        font-size: 20rpx;
        color: $text-color2;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1rpx solid rgba(229, 229, 229, 1);
        border-radius: 14rpx;
        .file-icon {
          width: 32rpx;
          height: 40rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }
}
</style>
